<template>
	<!-- 录音播放组件 -->
	<fui-row class="recording-play">
		<!-- 进度 -->
		<!-- <view class="progress" :style="width:{{progressValue}}%;"></view> -->

		<fui-col :span="24" class="recording-icon" @click="onPlay">
			<fui-icon :name="playIcon" size="32rpx" color="#fff" @click="onPlay"></fui-icon>
			<text class="text">{{playText}} </text>
		</fui-col>
	</fui-row>

</template>

<script>
	const playIcon = "suspend"
	const stopIcon = "play"
	import {
		mapActions
	} from 'pinia'
	import {
		useWx
	} from '../../../store/modules/wx'
	import BenzAMRRecorder from 'benz-amr-recorder'
	import {
		PREVIEW_URL
	} from '../../../_env'
	export default {
		props: {
			playValue: {
				type: String,
				default: null
			},
			localPlayValue: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				progressValue: 0,
				playText: '播放录音',
				playIcon: playIcon,
				isPlay: false,
				voice: null,
			}
		},
		computed: {
			url() {
				console.log(`${PREVIEW_URL}${this.playValue}`);
				if (this.localPlayValue) {
					return this.localPlayValue
				}
				return `${PREVIEW_URL}${this.playValue}`
			}
		},
		methods: {
			...mapActions(useWx, ['wxHandle']),
			// 点击播放
			onPlay() {
				const the = this
				uni.showLoading({
					title: '播放中'
				})
				if (this.localPlayValue) {
					this.wxHandle().playVoice({
						localId: this.localPlayValue,
						complete() {
							console.log('完成');
						}
					})
					this.wxHandle().onVoicePlayEnd({
						success: function(res) {
							uni.hideLoading()
						},
						fail(err) {
							console.log(err);
							uni.hideLoading()
						}
					});



				} else {
					const amr = new BenzAMRRecorder();

					amr.initWithUrl(this.url).then(() => {

						amr.play(); // 播放
						// const amrDuration = Math.ceil(amr.getDuration());
						// console.log('音频时长', amrDuration); // 获取音频时长

						the.isPlay = true
						the.playText = "终止播放"
						the.playIcon = stopIcon
					}).catch((err) => {
						console.log('播放失败:', err);
						uni.hideLoading()
						the.isPlay = false
					});

					amr.onEnded(() => { // console.log(播放结束)
						the.playText = "开始播放"
						the.playIcon = playIcon
						the.isPlay = false
						uni.hideLoading()
					})
				}


			},
		}
	}
</script>

<style scoped lang="scss">
	/* common/components/recordingPlay/recordingPlay.wxss */

	.recording {
		&-play {
			position: relative;
			width: 204rpx;
			height: 64rpx;
			line-height: 64rpx;
			// padding: 16rpx 0;
			background: #0052d9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			overflow: hidden;
		}

		&-time {
			flex: 1;
			font-size: 28rpx;
			font-weight: 600;
			color: #ffffff;
			margin-left: 32rpx;
			z-index: 99;
			position: relative;
		}

		&-icon {
			display: flex;
			justify-content: center;
			height: 100%;
			padding-right: 16rpx;
			align-items: center;
			z-index: 99;
			position: relative;

			.text {
				color: #fff;
				margin-left: 8rpx;
			}
		}
	}

	.progress {
		position: absolute;
		height: 100%;
		// width: 29%;
		background-color: #5b92eb;
		z-index: 1;
	}
</style>